<template>
  <div>
      <table style="width: 100%;height: 100%;" class="tableEle">
         <tr class="title">
            <th v-if="showIndex" style="width: 1.2em;"> </th>
            <th v-if="showCheckBox" style="width: 1.2em;"> </th>
            <th v-for="(column,index) in columns" :key="index" :width="column.width">
              {{column.title}}
            </th>
         </tr>
         <tr v-for="(item,indexR) in localData" :key="indexR" class="rows" :class="item.__selected?'rowSelected':''" @click="selectItem(item)">
            <td v-if="showIndex">{{ indexR+1 }}</td>

            <td v-if="showCheckBox"><CheckBox :value.sync="item.__checked" @checked="checkItem(item)"></CheckBox></td>
                
            <td v-for="(column,indexC) in columns" :key="indexC" @dblclick="(e)=>dblclick(e,item,column,indexC)" >
                <div>
                    <div v-if="typeof (item[indexC])!='undefined' && item[indexC].__editing" style="height: 80%;width:100% ">
                        <JSelect v-if="column.type == 'select'" :options="column.options" v-model="item[column.key]" @blur='blur(item,column,indexC)' style="height: 100%;line-height: 100%; "></JSelect>
                        <JInput v-else v-model="item[column.key]" @blur='blur(item,column,indexC)' @valueChange="(val)=>item[column.key] = val" style="height: 100%;line-height: 100%;"></JInput>
                    </div>
                    <div v-else>{{item[column.key]}}
                    </div>
                </div>            
            </td>
        </tr>
      </table>
  </div>
</template>

<script>
import Vue from 'vue';
import CheckBox from '../CheckBox/CheckBox.vue';
import JInput from '../JInput/JInput.vue';
import JSelect from '../JSelect/JSelect.vue';

export default {
    components:{
        CheckBox,
        JInput,
        JSelect
    },
    props:{
        data:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        columns:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        showCheckBox:{
            type:Boolean,
            default:false
        },
        showIndex:{
            type:Boolean,
            default:false
        },
        isMultiSelect:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            localData:[],
        }
    },
    created(){

    },
    mounted(){
    },
    watch:{
        data(val){
            this.localData = val;
        }
    },
    methods:{
        getData(){
            return this.localData;
        },
        computeWidth(){
            // let emptyColumns =  columns.filter(t=>{
            //     typeof t.width == 'undefined' || t.width == '' || t.width == null
            // })
            // let notEmptyColumns = columns.filter(t=>{
            //     typeof t.width == 'undefined' && t.width !='' && t.width != null
            // })
            // let leftwidth =''
            // notEmptyColumns.forEach(t=>{
            //     leftwidth += ' - '+t.width;
            // })
        },
        selectItem(item){
            Vue.set(item,'__selected',true);            
            if(!this.isMultiSelect){
                this.data.forEach(t=>{
                    if(t!=item){
                        Vue.set(t,'__selected',false);
                    }
                })
            }
            let selectedItems = this.data.filter(t=>{
                return t.__selected;
            })
            this.$emit('selectChanged',selectedItems);
        },
        checkItem(item){
            // Vue.set(item,'__checked',!item.__checked);
            let checkItems = this.data.filter(t=>{
                return t.__checked;
            })
            this.$emit('checkChanged',checkItems);
        },
        dblclick(e,item,column,indexC){
            if(column.editable){
                if(typeof item[indexC]== 'undefined'){
                Vue.set(item,indexC,{});
                }
                Vue.set(item[indexC],'__editing',true)
                this.$emit('dblclick',item,column,indexC);   
            }
        },
        blur(item,column,index)
        {
            item[index].__editing=false;
        }
    }
}
</script>

<style scoped>
.title{
    background: var(--theme-primary-color);    
    color: var(--theme-obprimary-color);
    resize: horizontal;
}
.rows:hover{
    outline: 2px solid var(--theme-primary-color);
    outline-offset: -2px;
}
table,
th,
td {
  border: 0.4px solid var(--theme-primary-color);
  text-align: center;
}

th:not(:last-child){
  border-right: 0.5px solid var(--theme-obprimary-color);
}
.rowSelected{
  background: var(--theme-highlight-color);
}
.tableEle{
    border-spacing: 0;
}
</style>